<template>
	<tm-fullView>
		<tm-menubars title="表格" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24" :padding="[0, 0]">
			<view class="text-size-n pa-24 text-blue">以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。</view>
			<tm-table @click="test" :list="list" activeCellColorRow="grey"></tm-table>
		</tm-sheet>
		<tm-sheet :shadow="24" :padding="[0, 0]">
			<view class="text-size-n pa-24 text-blue">基本的表格</view>
			<tm-table @click="test" :list="list2">
				<template #cell="{data}">
					<block v-if="data.parentIndex==1&&data.childrenIndex==1">
						<tm-button size="s">按钮</tm-button>
					</block>
					<block v-else>
						{{data.data.text}}
					</block>
				</template>
			</tm-table>
		</tm-sheet>
		<view style="height: 50upx;"></view>
	</tm-fullView>
</template>
<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmTable from "@/tm-vuetify/components/tm-table/tm-table.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmButton,tmTable},
	data() {
		return {
			list2: {
				headerBgcolor: 'primary',
				header: [
					{
						text: '1',
						
					},
					{
						text: '2',
						sort:true
					},
					{
						text: '3'
					},
					{
						text: '4'
					},
					{
						text: '5'
					}
				],
				col: [
					[
						{
							text: '36',
							color: ''
						},
						{
							text: 'ab'
						},
						{
							text: '569'
						},
						{
							text: '569'
						},
						{
							text: '单价'
						}
					],
					[
						{
							text: '56',
							color: ''
						},
						{
							text: 'zd'
						},
						{
							text: '569'
						},
						{
							text: '569'
						},
						{
							text: '单价'
						}
					],
					[
						{
							text: '12',
							color: ''
						},
						{
							text: 'dd'
						},
						{
							text: '569'
						},
						{
							text: '569'
						},
						{
							text: '单价'
						}
					]
				]
			},
			list: {
				headerBgcolor: 'bg-gradient-blue-accent',
				header: [
					{
						text: '设置整列宽',
						grid: 6,
						color: 'blue',
						sort:true
					},
					{
						text: '列颜色',
						color: 'green'
					},
					{
						text: '价格类型',
						color: ''
					},
					{
						text: '来源数据',
						color: 'blue'
					},
					{
						text: '价格类型',
						color: ''
					},
					{
						text: '价格类型',
						color: ''
					}
				],
				col: [
					[
						{
							text: '255',
							color: ''
						},
						{
							text: '569'
						},
						{
							text: '569'
						},
						{
							text: '569'
						},
						{
							text: '单价'
						},
						{
							text: '呵呵'
						}
					],
					[
						{
							text: '124',
							grid: 3,
							color: 'green'
						},
						{
							text: '569',
							grid: 3
						},
						{
							text: '单独控制列表',
							grid: 6,
							color: 'pink'
						},
						{
							text: '569'
						},
						{
							text: '单价'
						},
						{
							text: '官网扒取'
						}
					],
					[
						{
							text: '36'
						},
						{
							text: '569'
						},
						{
							text: '569'
						},
						{
							text: '569'
						},
						{
							text: '单价'
						},
						{
							text: '官网扒取'
						}
					],
					[
						{
							text: '5'
						},
						{
							text: '569'
						},
						{
							text: '569',
							color: 'bg-gradient-green-accent'
						},
						{
							text: '569'
						},
						{
							text: '单价'
						},
						{
							text: '官网扒取'
						}
					],
					[
						{
							text: '88'
						},
						{
							text: '569'
						},
						{
							text: '569'
						},
						{
							text: '569'
						},
						{
							text: '单价'
						},
						{
							text: '官网扒取'
						}
					],
					[
						{
							text: '单独控制颜色',
							color: 'blue'
						},
						{
							text: '99'
						},
						{
							text: '569'
						},
						{
							text: '569'
						},
						{
							text: '单价'
						},
						{
							text: '官网扒取'
						}
					],
					[
						{
							text: '200'
						},
						{
							text: '569'
						},
						{
							text: '569'
						},
						{
							text: '569'
						},
						{
							text: '单价'
						},
						{
							text: '官网扒取'
						}
					]
				]
			}
		};
	},
	methods: {
		test(e){
			uni.showModal({
				title:'提示',
				content:`列：${e.col},行${e.row},数据为:${JSON.stringify(e.data)}`
			})
		}
	}
};
</script>

<style></style>
